<!-- 
  底部分页 集成post分页请求
  其他 get post 请求没有集成，直接在组件页面中使用axios post get即可
  带分页的Post请求参考 views/user/list
 -->
<template>
  <div
    class="block"
    style="padding-top: 20px; padding-right: 30px; float: right"
  >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="obj.data.page.page"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="obj.data.page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="obj.data.page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import { reactive } from "vue";

export default {
  // eslint-disable-next-line no-unused-vars
  setup(props, { attrs, slots, emit }) {
    const obj = reactive({
      url: "",
      data: {
        page: {
          total: 0,
          size: 10,
        },
      },
    });

    //接收引用page组件的调用，传递请求地址与请求数据，会议body格式发送
    const postPageReq = (url, data) => {
      obj.url = url;
      obj.data.data = data;
      obj.data.page.total = 0;
      obj.data.page.pages = 0;
      reqPost();
    };

    //分页请求发出的数据为body请求，参数格式为 : {page:{} , data:data} data中的data可为任意格式
    const reqPost = () => {
      axios
        .post("/gateway/demo", obj.data)
        .then(function (response) {
          emit("getPageData", response.data.data.records);
          obj.data.page.total = response.data.data.total;
          obj.data.page.current = response.data.data.current;
          obj.data.page.size = response.data.data.size;
        })
        .catch(function (error) {
          console.log(error);
        });
    };

    //选择了每页显示的条数
    const handleSizeChange = (val) => {
      obj.data.page.size = val;
      reqPost();
    };

    //点击了第几页
    const handleCurrentChange = (val) => {
      obj.data.page.current = val;
      reqPost();
    };
    return {
      handleSizeChange,
      handleCurrentChange,
      postPageReq,
      reqPost,
      obj,
    };
  },
};
</script>

<style>
</style>
